import React, { useEffect, useState } from 'react';
import { DatePicker, Space ,Input,Form,Button,Table,Card, Select, message} from 'antd';
import _ from 'lodash';
import moment from 'moment';
import dayjs from 'dayjs';
import './index.scss'
import { getScheduleAPI, setScheduleAPI } from '@/api/admin';
import CourseSchedule from '@/components/CourseSchedule';

const {Option} =Select



const Course = ()=>{

  //存储新设置课表信息
  const [scheduleInfo,setScheduleInfo] =useState({
    data:'',
    week:'',
    time:'',
    place:'',
    subjectId:'',
    coachId:'',
    studentId:[]
  })




  //时间列表
  const timeList=[
    {
      key:'1',
      label:"8:00-10:00"
    },
    {
      key:'2',
      label:"10:00-12:00"
    },
    {
      key:'3',
      label:"14:00-16:00"
    },
    {
      key:'4',
      label:"16:00-18:00"
    }
  ]
  //科目列表
  const subjectList=[
    {
      key:'s1',
      label:"科目一"
    },
    {
      key:'s2',
      label:"科目二"
    },
    {
      key:'s3',
      label:"科目三"
    },
    {
      key:'s4',
      label:"科目四"
    }
  ]
  //日期选择
  const [weeks,setWeeks] =useState('')
  const [dateString,setDateString] =useState('')
  const onChange = (date, dateString) => {
    const selectedDate = dayjs(date);
    const weekDayName = selectedDate.format('ddd');
    setWeeks(weekDayName)
    setDateString(dateString)
    console.log(date,dateString,weekDayName);
  }
  //检测时间选择框
  const [timeSelect,setTimeSelect] = useState('')
  const onSelectChange =(values)=>{
    console.log('选择了',values)
    const timeS= timeList.filter(item =>item.key===values)
    const timeR =timeS.map(item =>item.label).join(',')
    setTimeSelect(timeR)
  }
  //场地选择
  const [places,setPlaces]= useState('')
  //科目选择
  const [subject,setSubject] = useState('')
  const onSelectSubject =(values) =>{
    console.log(values)
    // const subjectS = subjectList.filter(item =>item.key === values)
    // const subjectR = subjectS.map(item =>item.label).join(',')
   setSubject(values)
  }
  //教练员编号
  const [coachID,setCoachID] = useState('')
  //学员学号
  const [studentID,setStudentID] = useState('')


  //提交课程表设置信息
const handleSubmit = async() =>{
  //处理学号格式
  const regex = /[\s]+/ // 分割空白字符
  const studentIDE = studentID.split(regex)
  console.log(studentIDE)
const res = await setScheduleAPI({
  ...scheduleInfo,
    data:dateString,
    week:weeks,
    time:timeSelect,
    place:places,
    subjectId:subject,
    coachId:coachID,
    studentId:studentIDE
})
if(res.status === '200')
      message.success('提交成功！')
    else if(res.status === '202')
    message.error('提交失败！')

 
}
    return(
      <Card> 
        <Card>
        <div style={{ display: 'flex', gap: '15px' }}>
  <div>日期:<Space direction="vertical" style={{ width: '150px' }} ><DatePicker onChange={onChange} />
  </Space></div>
  <div>时间:
  <Select
              placeholder="请选择用户"
              defaultValue="请选择"
              onChange={onSelectChange}
              style={{ width: 120 }}
            >
              {timeList.map(item =><Option key={item.key} value={item.key}>{item.label}</Option>)}
              
            </Select>
  </div>
  
  <div>场地名称:<Input placeholder="场地名称" style={{ width: '150px' ,left:'3px'}} value={places} onChange={(e) =>setPlaces(e.target.value)}/></div>
  <div>科目:
  <Select
              placeholder="请选择科目"
              defaultValue="请选择"
              onChange={onSelectSubject}
              style={{ width: 120 }}
            >
              {subjectList.map(item =><Option key={item.key} value={item.key} >{item.label}</Option>)}
              
            </Select>
  </div>


  <div>教练员编号:<Input placeholder="请输入教练员编号" style={{ width: '150px',left:'3px' }} value={coachID} onChange={(e) =>setCoachID(e.target.value)}/></div>
  <div>学员学号:<Input placeholder="请输入学员学号,并以空格隔开" style={{ width: '210px' ,left:'3px'}}
   value={studentID} onChange={(e) =>setStudentID(e.target.value)} /></div>
   <Button type="primary" htmlType="submit" onClick={handleSubmit}>提交</Button>
</div>

          </Card>   
    
<Card className='schedule'>
{/* //课程表 */}
        <CourseSchedule student_id=''/>
</Card>
      <Card>
      <div style={{position:'absolute',left:'40%', border:'none'}}>驾校管理系统&copy;2024-2099</div>
      </Card>  
      </Card>
    )
}

export default Course;